<template>
  <el-row class="login-container">
      <el-col :lg="16" :md="12" class="left">
          <div>
              <div>欢迎光临</div>
              <div>此站点是《vue3 + vite实战商城后台开发》视频课程的演示地址</div>
          </div>
      </el-col>
      <el-col :lg="8" :md="12" class="right">
          <h2 class="title">欢迎回来</h2>
          <div>
              <span class="line"></span>
              <span>账号密码登录</span>
              <span class="line"></span>
          </div>
          <el-form ref="formRef" :rules="rules" :model="form" class="w-[250px]">
              <el-form-item prop="username">
                  <el-input v-model="form.username" placeholder="请输入用户名">
                      <template #prefix>
                          <el-icon><user /></el-icon>
                      </template>
                  </el-input>
              </el-form-item>
              <el-form-item prop="password">
                  <el-input type="password" v-model="form.password" placeholder="请输入密码" show-password>
                      <template #prefix>
                          <el-icon><lock /></el-icon>
                      </template>
                  </el-input>
              </el-form-item>
              <el-form-item>
                  <el-button round color="#626aef" class="w-[250px]" type="primary" @click="onSubmit">登 录</el-button>
              </el-form-item>
          </el-form>
      </el-col>
  </el-row>
</template>

<script setup>
import { ref,reactive } from 'vue'
import axios from "axios";
import {login} from '@/api/manager'
import { ElNotification } from 'element-plus'
import { useRouter } from 'vue-router'
import requestUtil from '@/utils/request'
import store from '@/store'
import qs from "qs"
  import {ElMessage} from "element-plus"

// do not use same name with ref
const form = reactive({
username:"",
password:""
})

const router = useRouter()
const rules = {
  username:[
      { 
          required: true, 
          message: '用户名不能为空', 
          trigger: 'blur' 
      },
  ],
  password:[
      { 
          required: true, 
          message: '用户名不能为空', 
          trigger: 'blur' 
      },
  ]
}

const formRef = ref(null)

/**
 const onSubmit = () => {
  formRef.value.validate((valid)=>{
      if(!valid){
          return false
      }
      login(form).then((res) => {
        
        console.log(res.data);
        // 提示成功
        ElNotification({
         message: "登录成功",
         type: 'success',
         duration:3000
        })
        router.push("/")
      })
      .catch(err=>{
            ElNotification({
                message: err.response.data.msg || "请求失败",
                type: 'error',
                duration:3000
            })
        })
  })
} 
 */
 const onSubmit=()=>{
  formRef.value.validate(async(valid)=>{
      if(valid){
        let result=await requestUtil.post("login?"+qs.stringify(form))
        let data=result.data;
        if(data.code==200){
          const token=data.authorization
          store.commit('SET_TOKEN',token);
        }else{
          ElMessage.error(data.msg)
        }
      }else{
        console.log("验证失败")
      }
    })
  }

</script>

<style scoped>
.login-container{
  @apply min-h-screen bg-indigo-500;
}
.login-container .left,.login-container .right{
  @apply flex items-center justify-center;
}
.login-container .right{
  @apply bg-light-50 flex-col;
}
.left>div>div:first-child{
  @apply font-bold text-5xl text-light-50 mb-4;
}
.left>div>div:last-child{
  @apply text-gray-200 text-sm;
}
.right .title{
  @apply font-bold text-3xl text-gray-800;
}
.right>div{
  @apply flex items-center justify-center my-5 text-gray-300 space-x-2;
}
.right .line{
  @apply h-[1px] w-16 bg-gray-200;
}
</style>